import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router';
import { Menu, Icon } from 'antd';

const SubMenu = Menu.SubMenu;
const KeysOfPathnames = {
    "/content/page/manager": "1",
    "/content/assets/banner/manager": "3",
    "/content/assets/ads/manager": "5",
    "/content/assets/topic/manager": "7",
    "/content/assets/event/manager": "9",
}

/**
 * 内容管理页面导航页
 */
export class ContentPageNavigation extends React.Component<RouteComponentProps<any, any>, any> {

    constructor(props: RouteComponentProps<any, any>, context: any) {
        super(props, context);

        this.state = {
            current: KeysOfPathnames[this.props.location.pathname],
            openKeys: ["sub1",],
        };
    }

    private handleClick = (e) => {
        // console.log('Clicked: ', e);
        this.setState({ current: e.key });
    }

    private onOpenChange = (openKeys) => {
        this.setState({ openKeys: openKeys });
    }

    render() {
        return <div className="inner-container">
            <Menu
                mode="inline"
                openKeys={this.state.openKeys}
                selectedKeys={[this.state.current]}
                style={{ width: 240 }}
                onOpenChange={this.onOpenChange}
                onClick={this.handleClick}
            >
                <Menu.Item key="1"><Link to="/content/page/manager">页面管理</Link></Menu.Item>
                <SubMenu key="sub1" title={<span>素材管理</span>}>
                    <Menu.Item key="3"><Link to="/content/assets/banner/manager">Banner管理</Link></Menu.Item>
                    <Menu.Item key="5"><Link to="/content/assets/ads/manager">广告位管理</Link></Menu.Item>
                    <Menu.Item key="7"><Link to="/content/assets/topic/manager">专题管理</Link></Menu.Item>
                    <Menu.Item key="9"><Link to="/content/assets/event/manager">活动管理</Link></Menu.Item>
                </SubMenu>
            </Menu>
            <div className="inner-content">
                {this.props.children}
            </div>
        </div >;
    }
}